<template>
	<view class="container">
		<view class="apply_box">
			<view class="circle" @click="goToAsk">
				<image class="icon left" src="/static/ask.png"></image>
				<text class="text">请假</text>
			</view>
			<view class="circle" @click="goToOvertime">
				<image class="icon right" src="/static/overtime.png"></image>
				<text class="text">加班</text>
			</view>
		</view>
		<view class="apply_re">
			<u-cell-group>
				<u-cell @click="goToAskRecord" title="请假记录" icon="/static/askrecord.png" :isLink="true" arrow-direction="right"></u-cell>
				<u-cell @click="goToOtRecord" title="加班记录" icon="/static/otrecord.png" :isLink="true" arrow-direction="right"></u-cell>
			</u-cell-group>
			
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			goToAsk() {
				uni.navigateTo({
					url: '/subpages/ask/ask'
				})
			},
			goToOvertime() {
				uni.navigateTo({
					url: '/subpages/overtime/overtime'
				})
			},
			goToAskRecord() {
				uni.navigateTo({
					url: '/subpages/askrecord/askrecord'
				})
			},
			goToOtRecord() {
				uni.navigateTo({
					url: '/subpages/otrecord/otrecord'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.apply_box {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 200upx;
		background-color: #ffffff;
		margin-bottom: 20upx;

		.circle {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 150upx;
			height: 150upx;
			transition: all 0.2s ease-in-out;

			.icon {
				width: 100upx;
				height: 100upx;
				margin-bottom: 10upx;
				border-radius: 50%;
				background-color: #F5F5F5;
			}
			
			.left{
				background-color: #e70716;
			}
			
			.right{
				background-color: #f35100;
			}

			.text {
				font-size: 28upx;
				color: #333;
				margin-top: 10upx;
			}
		}
	}

	.apply_re {
		background-color: #ffffff;
		
		.u-cell {
			font-size: 28upx
		}
	}
</style>